<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品分类</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/classify.css"/>
		<link rel="stylesheet" type="text/css" href="css/popup.css"/>
		<script type="text/javascript" src="js/index.js" ></script>
	</head>
	<body>
		<!-- 背景div -->
	<div id="mydiv" style="height:0px;"></div>
	<script type="text/javascript">
		window.onload = function() {
		    //配置
		    var config = {
		        vx: 4,	//小球x轴速度,正为右，负为左
		        vy: 4,	//小球y轴速度
		        height: 5,	//小球高宽，其实为正方形，所以不宜太大
		        width: 5,
		        count: 200,		//点个数
		        color: "111,193,291", 	//点颜色
		        stroke: "255,0,0", 		//线条颜色
		        dist: 6000, 	//点吸附距离
		        e_dist: 20000, 	//鼠标吸附加速距离
		        max_conn: 10 	//点到点最大连接数
		    }

		    //调用
		    CanvasParticle(config);
		}
	</script>
	<script type="text/javascript" src="js/canvas-particle.js"></script>
		
		
		
		<div id="web">
			<div class="header">
				<div class="top">
					<div class="top-t clearfix">
						<span>
							<a  href="register.html" onclick="register()">注册</a>
							<a  href="no-calculate.html" onclick="login()">登录</a>
							<a  href="login.html" onclick="viplogin()">vip登录</a>
						</span>
						<ul>
							<li><a href="search.html" style="border-right:solid 1px #a8a9ae ;">商家入驻</a></li>
							<li><a href="Lb-car.html" style="border-right:solid 1px #a8a9ae ;">我的订单</a></li>
							<li><a href="address.html"><img src="img/buy-car.png"/>&nbsp;<b>(0)</b></a></li>
						</ul>
					</div>
				</div>
					
				<div class="header_contant clearfix">
					<div class="logo">
						<a href="index.html"><img src="img/LOGO.png"/></a>
					</div>
					<div class="search">
						<form action="" method="">
							<input type="text" placeholder="search"/>
							<input type="image" src="img/search.png" />
						</form>
						<ul class="clearfix">
							<li><a href="">地板</a></li>
							<li><a href="">池板</a></li>
							<li><a href="">地板</a></li>
							<li><a href="">池板</a></li>
							<li><a href="">地板</a></li>
							<li><a href="">池板</a></li>
						</ul>
					</div>
				</div>
			</div>
			<nav>
				<div class="nav">
					<ul class="clearfix">
						<li><a href="">木工</a></li>
						<li><a href="">泥水工</a></li>
						<li><a href="">油漆工</a></li>
						<li><a href="">水电工</a></li>
						<li><a href="">门窗/其他</a></li>
						<li><a href="">装修工具</a></li>
						<li><a href="">消费工具</a></li>
						<li><a href="">建筑防护</a></li>
						<li><a href="">精细化学品</a></li>
						<li><a href="">定制/非标准</a></li>
					</ul>
				</div>
			</nav>
		<div class="centent">
			<div class="nav_left">
				<section id="conter">
			        <section id="help-left" style="margin-left: 40px;">
			            <details class="menu" close>
			                <summary>木工</summary>
			                <ul style="margin-left: 30px;">
			                	<li><a href="#">板材</a></li>
			                    <li><a href="#">地板</a></li>
			                    <li><a href="#">木线</a></li>
			                    <li><a href="#">地板配件</a></li>
			                    <li><a href="#">吊件钢龙骨</a></li>
			                    <li><a href="#">木工类五金</a></li>
			                </ul>
			            </details>
			            <details class="menu" close>
			                <summary>泥水工</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">玩水的</a></li>
			                    <li><a href="#">和泥的</a></li>
			                </ul>
			            </details>
			            <details class="menu" close>
			                <summary>油漆工</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">粉漆</a></li>
			                    <li><a href="#">配料</a></li>
			                    <li><a href="#">新手入门</a></li>
			                </ul>
			            </details>
			            <details class="menu" close>
			                <summary>水电工</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">维修电路</a></li>
			                    
			                </ul>
			            </details>
			             <details class="menu" close>
			                <summary>门窗、其他</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">撞门</a></li>
			                    <li><a href="#">拆窗</a></li>
			                    <li><a href="#">其他</a></li>
			                </ul>
			            </details>
			            <details class="menu" close>
			                <summary>维修工具</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">螺丝刀</a></li>
			                    <li><a href="#">电转</a></li>
			                    <li><a href="#">螺母</a></li>
			                </ul>
			            </details>
			             <details class="menu" close>
			                <summary>消防材料</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">消防车</a></li>
			                    <li><a href="#">水管</a></li>
			                </ul>
			            </details>
			            <details class="menu" close>
			                <summary>建筑防护</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">墙</a></li>
			                    <li><a href="#">砖头</a></li>
			                </ul>
			            </details>
			            <details class="menu" close>
			                <summary>精细化学品</summary>
			                <ul style="margin-left: 30px;">
			                    <li><a href="#">凳子</a></li>
			                    <li><a href="#">水龙头</a></li>
			                    <li><a href="#">其他</a></li>
			                    
			                </ul>
			            </details>
			        </section>
			        <section id="help-right"></section>
			    </section>
			</div>
			<div class="centent_right">
				<!--<div class="centent_img">
					
					<img src="img/lb/lb.png"/>
				</div>-->
				<div class="popup-container">
					<div class="img-flex"></div>
				</div>
				<div class="centent_wz">
					<table>
						<tr>
							<td><span>品牌</span></td>
							<td><a href="#">TOTO(5)</a></td>
						</tr>
						<tr>
							<td><span>分类</span></td>
							<td><a href="#">坐式马桶(3)</a></td>
							<td><a href="#">智能马桶(2)</a></td>
						</tr>
						<tr>
							<td><span>筛选条件</span></td>
							<td><a href="#">价格</a></td>
							<td><a href="#">功能</a></td>
							<td><a href="#">尺寸</a></td>
						</tr>
					</table>
				</div>
				
				<div class="centent_table">
					<div class="span1">
						<div class="span2">
							排序<select>
									<option value="最新">最新</option>
								</select>
						</div>	
					</div>
					<table>
						
						<tr>
							<td>
								<div class="aaa">
									<img src="img/lb/12.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/11.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/10.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/9.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
						</tr>
						<tr>
							<td>
								<div class="aaa">
									<img src="img/lb/8.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/7.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/6.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/5.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
						</tr>
						<tr>
							<td>
								<div class="aaa">
									<img src="img/lb/4.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/3.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/2.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
							<td>
								<div class="aaa">
									<img src="img/lb/1.png" />
									<span><i>欢迎来到鲁班商城</i></span>
								</div>
								
								<p>TOTO</p>
								<p>新款坐式马桶</p>
								<p>现价￥150.00</p>
								<p>总销量：10</p>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>

		<div style="" >
		<footer style=" padding-top: 30px; margin-top: 10px;">
				<div class="footer_tittle clearfix">
					<ul>
						<li><img src="img/you.jpg"></li>
						<li><h4>品质保障</h4>
							<span>品质保证 购物无忧</span>
						</li>
					</ul>
					<ul>
						<li><img src="img/te.jpg"></li>
						<li><h4>特色服务</h4>
							<span>针对户型 私人定制</span>
						</li>
					</ul>
					<ul>
						<li><img src="img/sheng.jpg"></li>
						<li><h4>全网最低</h4>
							<span>厂家直销 低价承诺</span>
						</li>
					</ul>
					<ul>
						<li><img src="img/usre.jpg"></li>
						<li><h4>帮助中心</h4>
							<span>您的购物指南</span>
						</li>
					</ul>
				</div>
				<div class="footer_ul clearfix">
					<hr/>
					<div class="clearfix"></div>
					<ul class="fl">
						<li>
							<h5><a href="">新手指南</a></h5>
						</li>
						<li><a href="">新手指南</a></li>
						<li><a href="">购物流程</a></li>
						
					</ul>
					<ul class="fl">
						<li>
							<h5><a href="">支付方式</a></h5>
						</li>
							<li><a href="">支付宝</a></li>
							<li><a href="">微信</a></li>
					</ul>
					<ul class="fl">
						<li>
							<h5><a href="">物流配送</a></h5>
						</li>
						<li><a href="">配送方式</a></li>
						<li><a href="">服务流程</a></li>
						
					</ul>
					<ul class="fl">
						<li>
							<h5><a href="">客服中心</a></h5>
						</li>
							<li><a href="">在线客服</a></li>
							<li><a href="">常见问题</a></li>
					</ul>
					<ul class="fl">
						<li style="line-height: 17px;">扫一扫，关注鲁班兄弟</li>
						<li><img src="img/code.png"/></li>
					</ul>
				</div>
			</footer>
			<div class="bottom">
				<div class="bottom-contant">
					<p>Copyright © 2015-2016 QDTG. All rights reserved. 鲁班兄弟 粤ICP16035</p>
					<ul class="clearfix">
						<li><a href="">关于我们</a></li>
						<li><a href="">联系我们</a></li>
						<li style="border: none;"><a href="">法律说明</a></li>
					</ul
				</div>
			</div>
		</div>
		</div>
		<script src="js/jquery-1.11.3.min.js"></script>
			<script type="text/javascript" src="js/fragment.js"></script>
			<script type="text/javascript">
			$(function() {
			var fragmentConfig = {
				container : '.img-flex',//显示容器
				line : 10,//多少行
				column : 24,//多少列
				width : 1090,//显示容器的宽度
				animeTime : 10000,//最长动画时间,图片的取值将在 animeTime*0.33 + animeTime*0.66之前取值 
				img : 'img/lb/lb.png'//图片路径
			};
			fragmentImg(fragmentConfig);
			});
		</script>
	</body>
</html>
